<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="岗位详情"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="item">
				<view class="item-data">
					<view class="item-line">
						<view class="item-title">
							{{detail.title}}
						</view>
						<view class="item-price">
							{{detail.isMianyi==1? '面议':detail.workSalary? Math.floor(detail.workSalary) + (detail.workDanwei?detail.workDanwei:'元/天'):""}}
						</view>
					</view>
					<view class="item-line">
						<text>{{detail.workEducation=="不限"?"学历不限":detail.workEducation}}</text>
						<text>{{detail.workType=="不限"?"工作形式不限":detail.workType}}</text>
					</view>
					<view class="item-tag" v-if="detail.tip">
						<view v-for="tag in detail.tip.split(',')">{{tag}}</view>
					</view>
					<view class="item-date" v-if="detail.timeCreate">
						{{detail.timeCreate.split(" ")[0]}}
					</view>
				</view>
				<!-- <view class="item-bottom">
					<view class="item-user" @click="toCompany">
						<view class="item-user-picdir">
							<image :src="baseImage + detail.picdir" mode="" v-if="detail.picdir"></image>
							<image :src="imgUrl + 'userPicdir.png'" mode="" v-else></image>
						</view>
						<view class="item-user-name">
							{{detail.companyTitle}}
						</view>
					</view>

					<view class="item-status">
						{{`${detail.city.includes('/')? detail.city.split('/')[2]:detail.city}`}}
					</view>
				</view> -->
			</view>
			<view class="item">
				<view class="item-title">基本信息</view>
				<view class="item-info-box">
					<view class="item-info">
						<text>岗位标签：{{detail.gangwei || '-'}}</text>
					</view>
					<view class="item-info">
						<text>岗位薪资：日薪{{detail.isMianyi==1? '面议':Math.floor(detail.workSalary)}}</text>
					</view>
					<view class="item-info">
						<text>工作经验：{{detail.workExperience || '-'}}</text>
					</view>
					<view class="item-info">
						<text>工作形式：{{detail.workType || '-'}}</text>
					</view>
					<view class="item-info">
						<text>工作时间：{{detail.workTime || '-'}}</text>
					</view>
					<view class="item-info">
						<text>工作地址：{{`${detail.city?detail.city.replace('/市辖区',''):detail.city} ${detail.addr}`}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-title">岗位要求</view>
				<view class="item-info-box">
					<view class="item-info contentVisible" :class="{'expanded': isExpandedJob }">
						<text>{{detail.need}}</text>
					</view>
				</view>
				<view class="item-more" :class="isExpandedJob? 'rorate':''" @click="expandedChange('isExpandedJob')">
					<van-icon name="arrow-down" color="#999" />
				</view>
			</view>

			<view class="item">
				<view class="item-title">工作内容</view>
				<view class="item-info-box">
					<view class="item-info contentVisible" :class="{'expanded': isExpandedWork }">
						<text>{{detail.workCnt}}</text>
					</view>
				</view>
				<view class="item-more" :class="isExpandedWork? 'rorate':''" @click="expandedChange('isExpandedWork')">
					<van-icon name="arrow-down" color="#999" />
				</view>
			</view>
			<view class="item">
				<view class="item-title">岗位分析器</view>
				<view class="item-info-box">
					<view class="item-info analysis">
						该岗位<text style="color:#1684fc">{{beforeTimeStr}}</text>与求职者沟通过，总发起沟通次数<text style="color:#1684fc">{{sessCount}}
							次</text>，累计在线时长<text style="color:#1684fc">{{loginTime}}分钟</text>，近一月交换联系方式<text
							style="color:#1684fc">{{hezuoCount}}次</text>
						，近一月该岗位已被求职者浏览<text style="color:#1684fc">{{viewCount}}次</text>。
					</view>
				</view>
			</view>
		</view>
		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
			<view class="main-button-update" @click="show=true">
				<van-icon :name="'star'+(isFav?'':'-o')" size="18" :color="isFav?'#F7D367':'#9D9D9D'" />
				<text>
					收藏
				</text>
			</view>
			<view class="main-button-open" @click="show=true">
				立即沟通
			</view>
		</view>
		<view class="main-bj">

		</view>
		
		<!-- 底部登录弹窗 -->
		<van-popup position="bottom" :show="show" :z-index="2300" class="reloadMore" closeable close-icon="close" close-icon-position="top-right" @close="show = false">
			<NotLoginBottom ref="NotLoginBottomRef"></NotLoginBottom>
		</van-popup>
		
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import NotLoginBottom from '@/components/NotLoginBottom.vue'
	import {
		getPostDetail,
		favPost,
		notFavPost,
		seekerMessage
	} from "@/core/web-api/qiuzhiduan.js"
	import {getGangweiDetail} from "@/core/web-api/youke.js"
	export default {
		components: {
			Navbar,NotLoginBottom
		},
		data() {
			return {
				isExpandedJob: false,
				isExpandedWork: false,
				detail: {},
				bottomBtnHeight: uni.upx2px(90),
				id: "",
				isFav: false,
				isOver: true,
				beforeTime: "",
				beforeTimeStr:"",
				sessCount: "",
				loginTime: "",
				hezuoCount: "",
				viewCount: "",
				show:false,
			}
		},
		methods: {
			

			/**
			 * 收藏
			 */
			favData() {
				// uni.navigateTo({
				// 	url: '/pagesroot/login/login'
				// })
				// favPost({
				// 	id: this.id
				// }).then(res => {
				// 	if (res.code == 20000) {
				// 		this.isFav = true;
				// 	} else {
				// 		uni.showToast({
				// 			title: res.message,
				// 			icon: "none"
				// 		})
				// 	}
				// }).finally(() => {
				// 	this.isOver = true;
				// })
			},

			/**
			 * 收藏
			 */
			notFavData() {
				notFavPost({
					id: this.id
				}).then(res => {
					if (res.code == 20000) {
						this.isFav = false;
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).finally(() => {
					this.isOver = true;
				})
			},

			/**
			 * 展开、缩放
			 * @param {Object} type
			 */
			expandedChange(type) {
				this[type] = !this[type]
			},

			/**
			 * 跳转企业详情
			 */
			toCompany() {
				uni.navigateTo({
					url: '/pagesroot/login/login'
				})
			},

			/**
			 * 加载岗位详情
			 */
			getDetail() {
				getGangweiDetail({
					id: this.id
				}).then(res => {
					if (res.code == 20000) {
						this.detail = res.data.detail;
						this.isFav = res.data.isFav;
						const {
							beforeTime,
							sessCount,
							loginTime,
							hezuoCount,
							viewCount
						} = res.data;
						this.beforeTime = beforeTime;
						if(beforeTime){
						switch(true){
							case beforeTime<60:
							colose.log("aaaa");
							this.beforeTimeStr=beforeTime+"分钟前";
							break;
							case  beforeTime<60*24:
							console.log("time:::"+Math.round(beforeTime/60));
							this.beforeTimeStr=Math.round(beforeTime/60)+"小时前";
							break;
							case  beforeTime<60*24*7:
							console.log("time:::"+Math.round(beforeTime/60/24));
							this.beforeTimeStr=Math.round(beforeTime/60/24)+"天前";
							break;
							case  beforeTime<60*24*14:
							colose.log("dddd");
							this.beforeTimeStr="一周前";
							break;
							case  beforeTime<60*24*21:
							colose.log("eeee");
							this.beforeTimeStr="两周前";
							break;
							case  beforeTime<60*24*30:
							colose.log("ffff");
							this.beforeTimeStr="三周前";
							break;
							case  beforeTime<60*24*30*2:
							colose.log("gggg");
							this.beforeTimeStr="一个月前";
							break;
							default:
							colose.log("eeeee");
							this.beforeTimeStr="两月前";
							} 
						}else{
							this.beforeTimeStr="还未"; 
					    }
						this.sessCount = sessCount;
						this.loginTime = loginTime;
						this.hezuoCount = hezuoCount;
						this.viewCount = viewCount;
					}
				})
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage', 'imgUrl'])
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail();
		}
	}
</script>

<style scoped lang="less">
	.contentVisible {
		overflow: hidden;
		transition: all 2s ease;
		height: 200upx;
		/* 初始高度，设置为展示一半的内容 */
		padding: 0;

		text {
			display: -webkit-box;
			-webkit-line-clamp: 5;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			/* 隐藏超出部分 */
		}
	}

	/* 扩展状态的样式 */
	.contentVisible.expanded {
		height: auto;

		text {
			display: -webkit-box;
			-webkit-line-clamp: unset;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			/* 隐藏超出部分 */
		}

		/* 展开后自动调整高度 */
	}

	/* 可选的文本样式 */
	.text {
		margin: 0;
	}

	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;

			&-update {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 276upx;
				color: #666666;

				text {
					margin-left: 10upx;
				}
			}

			&-open {
				width: 477upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}
	}

	.content {
		width: 100%;
		margin-top: 30upx;
	}

	.item {
		margin-bottom: 40upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 25upx 30upx 30upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);

		&-more {
			width: 100%;
			display: flex;
			justify-content: center;

			&.rorate {
				transform: rotate(180deg);
			}
		}

		&-data {
			position: relative;
		}

		&-date {
			position: absolute;
			bottom: 4upx;
			right: 0;
			font-size: 20upx;
			color: #999999;
		}

		&-line {
			display: flex;
			align-items: center;
			margin-bottom: 15upx;

			text {
				font-size: 26upx;
				color: #666666;
				display: block;
				height: 26upx;
				line-height: 26upx;

				&:nth-child(2) {
					padding-left: 10upx;
					margin-left: 10upx;
					border-left: 2upx solid #666;
				}
			}
		}

		&-title {
			flex: 1;
			font-size: 34upx;
			color: #000;
			font-weight: bold;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-price {
			font-size: 30upx;
			color: #0180ff;
		}

		&-tag {
			display: flex;
			flex-flow: wrap;
			margin-top: 15upx;

			view {
				font-size: 20upx;
				color: #333333;
				height: 38upx;
				padding: 0 14upx;
				border-radius: 19upx;
				background-color: #d0e0fd;
				margin-right: 20upx;
				line-height: 38upx;
			}
		}

		&-bottom {
			width: 100%;
			display: flex;
			margin-top: 25upx;
			padding: 16upx 0upx 0 0;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 2upx solid #f8f8f8;
		}

		&-user {
			display: flex;
			align-items: center;

			&-picdir {
				width: 54upx;
				height: 54upx;
				border-radius: 50%;
				border: 2upx solid #bcbcbc;
				box-sizing: border-box;

				image {
					width: 54upx;
					height: 54upx;
					border-radius: 50%;
				}
			}

			&-name {
				margin-left: 10upx;
				font-size: 22upx;
				color: #999999;
			}
		}

		&-date {
			font-size: 20upx;
			color: #999999;
		}

		&-status {
			font-size: 25upx;
			color: #333333;
		}

		&-info {
			line-height: 1.5;

			&-box {
				margin-top: 20upx;
			}

			text {
				font-size: 26upx;
				color: #666666;
			}

			&.analysis {

				width: 100%;
				font-size: 26upx;
				color: #666666;
				min-height: 200upx;
			}
		}
	}
</style>